import React from 'react';
import { Box, Text, useColorModeValue } from '@chakra-ui/react';
import { FaCheckCircle, FaTimesCircle } from 'react-icons/fa';

interface FeedbackProps {
  isCorrect: boolean;
  correctAnswer: string;
  explanation: string;
}

const Feedback: React.FC<FeedbackProps> = ({ isCorrect, correctAnswer, explanation }) => {
  const correctBg = useColorModeValue('green.100', 'green.900');
  const incorrectBg = useColorModeValue('red.100', 'red.900');
  const borderColor = useColorModeValue('gray.200', 'gray.600');

  return (
    <Box
      mt={4}
      p={4}
      borderRadius="md"
      bg={isCorrect ? correctBg : incorrectBg}
      border="1px"
      borderColor={borderColor}
    >
      <Box display="flex" alignItems="center" mb={2}>
        {isCorrect ? <FaCheckCircle color="green" /> : <FaTimesCircle color="red" />}
        <Text fontWeight="bold" ml={2}>
          {isCorrect ? 'Correct!' : 'Incorrect'}
        </Text>
      </Box>

      {!isCorrect && (
        <Text mb={2}>
          <strong>Correct answer:</strong> {correctAnswer}
        </Text>
      )}

      <Text>{explanation}</Text>
    </Box>
  );
};

export default Feedback;
